<!DOCTYPE html>
<html>
  <head>
    [[ if and .CSPEnabled .IsDevelopmentEnv ]]
    <!-- Cypress overwrites CSP headers in HTTP requests, so this is required for e2e tests-->
    <meta  http-equiv="Content-Security-Policy" content="[[.CSPContent]]"/>
    [[ end ]]
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <meta name="theme-color" content="#000" />

    <title>[[.AppTitle]]</title>

    <base href="[[.AppSubUrl]]/" />

    <link rel="mask-icon" href="[[.Assets.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28" />

    [[range $asset := .Assets.CSSFiles]]
      <link rel="stylesheet" href="[[$asset.FilePath]]" />
    [[end]]

    <script nonce="[[.Nonce]]">
      performance.mark('frontend_boot_css_time_seconds');
    </script>

    <style>
      /*
        Dev indicator that the page was loaded from the FEMT index.html.
        TODO: Will remove before deploying to staging.
      */
      .femt-dev-frame {
        position: fixed;
        top: 0;
        bottom: 1px;
        left: 0;
        right: 0;
        z-index: 99999;
        pointer-events: none;
        border: 2px solid white;
        border-image-source: linear-gradient(to left, #F55F3E, #FF8833);
        border-image-slice: 1;
      }
    </style>
  </head>

  <body>
    <div class="femt-dev-frame"></div>
    <div id="reactRoot"></div>

    <script nonce="[[.Nonce]]">
      [[if .Nonce]]
        window.nonce = '[[.Nonce]]';
      [[end]]

      [[if .Assets.ContentDeliveryURL]]
        window.public_cdn_path = '[[.Assets.ContentDeliveryURL]]public/build/';
      [[end]]

      window.__grafana_load_failed = function(...args) {
        console.error('Failed to load Grafana', ...args);
      };

      window.__grafana_boot_data_promise = new Promise(async (resolve) => {
        const bootData = await fetch("/bootdata");

        const rawBootData = await bootData.json();

        window.grafanaBootData = {
          _femt: true,
          ...rawBootData,
        }

        // The per-theme CSS still contains some global styles needed
        // to render the page correctly.
        const cssLink = document.createElement("link");
        cssLink.rel = 'stylesheet';

        let theme = window.grafanaBootData.user.theme;
        if (theme === "system") {
          const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
          theme = darkQuery.matches ? 'dark' : 'light';
        }

        if (theme === "light") {
          document.body.classList.add("theme-light");
          cssLink.href = window.grafanaBootData.assets.light;
          window.grafanaBootData.user.lightTheme = true;
        } else if (theme === "dark") {
          document.body.classList.add("theme-dark");
          cssLink.href = window.grafanaBootData.assets.dark;
          window.grafanaBootData.user.lightTheme = false;
        }

        document.head.appendChild(cssLink);

        resolve();
      });
    </script>

    [[range $asset := .Assets.JSFiles]]
      <script
      nonce="[[$.Nonce]]"
      src="[[$asset.FilePath]]"
      type="text/javascript"
      defer
      ></script>
    [[end]]
  </body>
</html>
